<template>
	<el-drawer
		title="成绩详情"
		:visible.sync="dialogVisible"
		direction="rtl"
		size="500px"
		append-to-body
		:show-close="false"
		:wrapper-closable="false"
		@mousedown.native="$drawer.getMousedown($event)"
		@mouseup.native="dialogVisible = $drawer.getMouseup($event)"
	>
		<el-popover
			placement="left-start"
			trigger="hover"
			width="200"
			content="按ESC键快捷关闭弹窗"
			class="drawer-close"
		>
			<span slot="reference" @click="dialogVisible = false">
				<i class="el-icon-close icon-common-close"></i>
			</span>
		</el-popover>
		<div class="drawerBody acconutDetails">
			<div v-if="info" class="acconutDetails-content">
				<div class="li">
					<h2 class="li-name" style="margin-bottom: 26px">赛事名称：{{ info.username }}</h2>
					<div class="li-name">比赛城市：{{ info.userphone }}</div>
					<div class="li-name">报名时间：{{ info.realname || '--' }}</div>
					<div class="li-name">成绩：{{ info.use_status === '-1' ? '已停用' : '正常' }}</div>
					<div class="li-content">
						<span>证书图片：</span>
						<el-image
							style="width: 300px; height: auto; display: block"
							:src="info.head_img"
						></el-image>
					</div>
				</div>
			</div>
			<el-empty v-else :image-size="160" style="margin-top: 100px"></el-empty>
		</div>
	</el-drawer>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				dialogVisible: false,
				info: null
			}
		},
		computed: { ...mapGetters(['userInfo', 'token']) },
		methods: {
			async init(info) {
				this.info = info
				this.dialogVisible = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.acconutDetails {
		&-content {
			.li {
				font-size: 14px;
				padding: 16px;
				background: #f9f8f8;
				border-radius: 4px;
				margin: 0 0 24px 0;
				&-name {
					margin-bottom: 15px;
				}

				&-user {
					display: flex;
					align-items: center;
					color: #4e5969;
				}

				&-content {
					color: #1d2129;
					margin-top: 20px;
					display: flex;
				}
			}
		}
	}
</style>
